<template>
	<view :style="skin" class="putStorage">
		<view class="reported">
			<view class="storageList flex-c-SB" v-for="(item,index) in inStorageList" :key="index">
				<view>
					{{$t('lease.productID')}}:<text :class="item.productId == actionDevice.productId?'actionLine':''">{{item.productId}}</text>
				</view>
				<!-- view>
					产品型号:{{item.productModel}}
				</view> -->
				<view class="applyBox flex-c-SB">
					<u-link :text="$t('property.view')" @click="getStockList(item)"></u-link>
					<u-link :text="$t('property.applyReceiving')" @click="leaStore(item)"></u-link>
				</view>

			</view>

		</view>

		<view class="record">
			<view class="recordTitle ">
				<view class="productid">{{$t('lease.productID')}}:</view>
				<view class="productModel">{{$t('lease.productModel')}}</view>
				<view class="audioTitle">{{$t('lease.status')}}</view>
			</view>
			<view class="recordList " v-for="(item,index) in storageRecord" :key="index">
				<view class="productid">{{item.productId}}</view>
				<view class="productModel">{{item.productModel}}</view>
				<view class="audio">
					<u-icon style="float: right;" v-if="item.stockOutAudit == 1" name="checkmark-circle" color="#81B337" size="24"></u-icon>

					<u-loading-icon size="24" v-else-if="item.stockOutAudit == 0"></u-loading-icon>

					<text style="color: red;" v-else-if="item.stockOutAudit == 2"
						class="iconfont icon-a-mingchengclose-circle-line iconContent"></text>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		stockOut,
		gtStockOutlogs
	} from '@/api/device.js'
	import toast from 'uview-ui/libs/config/props/toast';
	export default {
		data() {
			return {
				actionDevice:{
					   
					},

				// 上报数据
				inStorageList: [
				],

				storageRecord: [
					

				]
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		methods: {
			getStockList(item) {
				this.actionDevice = item
				gtStockOutlogs({
					productId: item.productId
				}).then(res => {
					if (res.code == 0) {
						this.storageRecord = res.data
					} else {
						this.storageRecord = []
					}
					console.log(res);
				})
			},
			leaStore(item) {
				stockOut({
					productId: item.productId
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						// 入库成功之后，等待后台审核，审核通过，数据同步，本地新增可租赁列表
						uni.showToast({
							title: '出库成功',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '出库失败',
							icon: 'none'
						});
					}
					this.getStockList(item)
				})
			},



		}
	}
</script>

<style lang="scss" scoped>
	.putStorage {
		padding: 16px;
		box-sizing: border-box;
		height: 100%;

		.reported {
			width: 100%;
			height: 240px;
			overflow-y: auto;
			border: 1px solid #ccc;
			background-color: #fff;
			padding: 16px;
			box-sizing: border-box;
			overflow-y: auto;

			.emptyTips {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
			}

			.storageList {
				width: 100%;
				margin-bottom: 4px;
				font-size: 14px;

				.actionLine {
					color: #2979ff;
				}

				.applyBox {
					width: 120px;

				}
			}
		}

		.record {
			width: 100%;
			height: calc(100% - 250px);
			overflow-y: auto;
			border: 1px solid #ccc;
			background-color: #fff;
			padding: 16px;
			box-sizing: border-box;
			overflow-y: auto;
			margin-top: 8px;

			.recordTitle {
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
			}

			.productid {
				text-align: left;
				width: 120px;
			}

			.productModel {
				text-align: center;
				width: 100px;
			}
			.audioTitle{
				text-align: right;
				width: 40px;
			}
			.audio {
				width: 24px;
				height: 24px;
			}

			.recordList {
				margin-top: 8px;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
			}
		}
	}
</style>